<template>
  <div>
    <hr>
    Welcome to my area :)
    
        <table>
          <tr>
            <td>苹果10¥/斤,折扣&lt; 8折 &gt;</td>
          </tr>
          <tr>
            <td>
              请输入你要购买的斤数: <input type="number" v-model="jin">
            </td>
          </tr>
          <tr>
            <td>
              <button @click="pay">结账买单~</button>
            </td>
          </tr>
          <tr>
            <td>
              结账单:总价{{sum}}¥元,折后价:{{after}}¥元 省了:{{cheap}}¥元
            </td>
          </tr>
        </table>
  </div>
</template>

<script>
export default {
data() {
  return {
    jin:'',
    sum:'',
    after:'',
    cheap:''
  }
},
methods:{
  pay(){
    this.sum=(10*this.jin);
    this.after=parseInt((10*this.jin)*0.8);
    this.cheap=((10*this.jin)-parseInt((10*this.jin)*0.8))
  }
}
}
</script>

<style>
div {
  text-align: center;
}
table {
  width: 100%;
  line-height: 20px;
  border: 2px solid #000;
  text-align: center;
  margin: 0 auto;
}
table tr:first-child{
  border-bottom: 2px solid rgb(187, 185, 185);
}
table tr td{
  border: 2px solid #000;
  text-align: center;
}
</style>